<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css" />
<script src="js/jquery-2.0.3.js"></script>


<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">

	<div class="wrap-container">
		<div style="margin-left: 20px;">
			<form class="layui-form" style="width: 90%; padding-top: 20px;">

				<table class="layui-table" style="left: 50px;">

					<tr>
						<td colspan="2">
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请单号：</label>
								<div class="layui-input-inline">
									<input type="text" name="flowid" id="flowid" autocomplete="off"
										readonly="readonly" class="layui-input" style="width: 500px;">
								</div>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人工号：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="applyno" id="applyno" class="layui-input" value=${empno}>
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人部门：</label>								
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly" name="applydeptname"
										id="applydeptname" class="layui-input">
										<input type="hidden" autocomplete="off" name="applydeptid"
										id="applydeptid" class="layui-input">
								</div>
							</div>
						</td>
					</tr>

					<tr>
						<td colspan="2">
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人邮箱：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="applyemail"
										id="applydeptemail" class="layui-input" style="width: 500px;">
								</div>
							</div>
						</td>
					</tr>
				</table>

				<table class="layui-table">
<!-- 					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label">使用人：</label>
								<div class="layui-input-inline">
									<select name="useno" id="useno" lay-verify="required"
										lay-filter="changeevent">
									</select>
								</div>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="useno" id="useno"
										class="layui-input">
									<div id="showuser"></div>
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">使用人部门：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="deptname"
										id="deptname" class="layui-input">
										<input type="hidden" autocomplete="off" name="deptid"
										id="deptid" class="layui-input">
								</div>
							</div>
						</td>
					</tr> -->
				</table>

				<table class="layui-table">

					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料编码：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="materialno"
										id="materialid" class="layui-input">
								</div>


							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料名称：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialname" id="materialname" class="layui-input">
								</div>


							</div>
						</td>

					</tr>


					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料单价：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialprice" id="materialprice" class="layui-input">
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">库存：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialnum" id="materialnum" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请数量：</label>
								<div class="layui-input-inline">
									<input type="number" autocomplete="off" min="1" id="applynum"
										name="applynum" class="layui-input">
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">总金额：</label>
								<div class="layui-input-inline">
									<input type="number" name="totalmoney" id="totalmoney"
										autocomplete="off" readonly="readonly" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
				</table>

				<table class="layui-table">
					<tr>
						<td colspan="2">

							<div class="layui-inline">
								<label class="layui-form-label" style="width: 120px">下环节处理人：</label>
								<!-- <div class="layui-input-inline">
									<select name="nexthandler" lay-verify="required"
										id="nexthandler" name="nexthandler" lay-search="">

									</select>
								</div> -->
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="nexthandler"
										id="nexthandler" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
				</table>

				<table class="layui-table">
					<tr>
						<td colspan="2">
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">申请说明</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入内容" class="layui-textarea"
										name="applyreason" id="applyreason" style="height: 20px;"></textarea>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">上传附件</label>

								<!-- <input type="file"
									name="filepath" id="filepath">  -->

								<button type="button" class="layui-btn" id="test1">上传附件</button>

								<!-- <input type="hidden" id="applyattach" name="applyattach"> -->
								<input type="hidden" id="applystatus" name="applystatus" value="1">
							</div>
						</td>
					</tr>
				</table>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit
							lay-filter="formDemo" id="btnData">立即提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>


	<!-- 弹出使用人 -->
	<div id="userFormDiv" style="display: none">
		<div class="layui-inline">
			<label class="layui-form-label">请选择下环节处理人</label>
			<div class="layui-input-inline">
				<select name="modules" lay-verify="required" lay-search="">
				</select>
			</div>
		</div>
		<br>
		<button class="layui-btn layui-btn-normal" lay-submit id="selectuser"
			lay-filter="formDemo">确定</button>
	</div>





	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
	<button class="layui-btn layui-btn-sm" lay-event="addBlog">添加新闻</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetpwd">重置密码</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	<script type="text/javascript">
		$(function() {
			$("#btn").click(function() {

				var title = $("#blogtitle").val();
				var content = $("#blogcontent").val();
				var id = $("#authorid").val();
				console.log(title + id + content);

				$.ajax({
					url : "addblog",
					type : "GET",
					data : {
						title : title,
						content : content,
						id : id
					},

					dataType : "json",
					success : function(data) {
						console.log(data);
						if (data == true) {
							parent.layer.closeAll(); //关闭所有,简单粗暴
							window.parent.location.reload(); //刷新父页面
						}

					}

				});

			});

		})
	</script>



	<script src="./layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use([ 'table', 'form','element' ], function() {
			var form = layui.form;
			var table = layui.table;
			var element = layui.element;

			table.render({
				elem : '#test', //显示位置
				url : 'blogpage', //地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '文章数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'id',
					title : 'ID',
					width : 80,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'title',
					title : '标题',
					width : 120
				}, {
					field : 'content',
					title : '内容',
					width : 250,
					edit : 'text',
					sort : true
				}, {
					field : 'author',
					title : '作者',
					width : 130
				}, {
					field : 'userlevel',
					title : '等级',
					width : 100,
					templet : function(res) {
						return res.userlevel == 0 ? "管理员" : "普通用户";
					}
				}, {
					field : 'usertel',
					title : '电话',
					width : 180,
					sort : true
				}, {
					field : 'userstate',
					title : '状态',
					width : 120,
					templet : function(res) {
						return res.userstate == 0 ? "禁用" : "启用";
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload'
			});

			//select发生改变的时候 获取部门信息
			 form.on('select(changeevent)', function() {
				//console.log("监听事件");
				$.ajax({
					url : "selemp/" + $("#useno").val(),
					type : "get",
					success : function(data) {
						//控制台打印看看
						//console.log("回调的数据" + data);
						//console.log("获取的部门领导" + data.deptids.deptleader);
						//把申请人部门和邮箱放到对应的文本框中
						$("#deptname").val(data.deptids.deptname);
						$("#deptid").val(data.deptids.deptid);
						$("#nexthandler").val(data.deptids.deptleader);
						
						
						
						//
						/* layui.use('element', function() {
	                        var element = layui.element;
	                        element.init();
	                    });  */
 	                    element.init();
						form.render();

					},
					dataType : "json"
				});

			});  

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'addBlog':

					layer.open({
						type : 1 //弹出层 div
						,
						area : [ '400px', '300px' ],
						shade : 0.6,
						id : 'LAY_layuipro01' //设定一个id，防止重复弹出
						,

						content : $("#addDiv"), //后面不用.html()

					});

				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {

						//console.log(data); //得到的是当前行对应的数据信息
						console.log("userId :" + data.userId);
						$.ajax({
							type : "DELETE", //提交方式
							url : "users/" + data.userId, //地址和springmvc中控制器地址一致
							success : function(cm) {
								layer.msg(cm.msg, {
									time : 2000
								//两秒延迟
								}, function() {
									if (cm.msg == "删除成功") {

										//obj.update(); ?? 理想
										//layer.close(index);;
										parent.layer.closeAll(); //关闭所有,简单粗暴
										window.parent.location.reload(); //刷新父页面
									}

								});

							}
						});

					});
				} else if (obj.event === 'edit') {

					//先给我们的表单元素赋值
					$("#userId").attr("value", data.userid);
					$("#userName").attr("value", data.username);
					console.log($("#userName").val());
					$("#userTel").attr("value", data.usertel);
					//性别

					if (data.usersex === "女") {
						$("input[name='userSex'][value='女']").prop("checked",
								true);
					} else {
						$("input[name='userSex'][value='男']").prop("checked",
								true);
					}

					layui.form.render('radio');

					//地址文本域 <textarea> 文字....</textarea>
					$("#userAddress").html(data.useraddress);

					//等级

					layer.open({
						type : 1 //弹出层 div
						,
						area : [ '600px', '530px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#editFormDiv"), //后面不用.html()

					});

					//表单的render
					layui.form.render();

					/* layer.prompt({
						formType : 2,
						//value : data.userName //.email
						value : JSON.stringify(data)
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					}); */
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							//传递的参数 key为参数名 {} 内传递的是参数的值
							/* key: {
							  
							  id: demoReload.val(),
							  username :....
							} */
							//只有一个key : value格式
							keywords : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});

			//监听提交  新增加的代码  监听2
			layui.form.on('submit(formDemo)', function(data) {
				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据 进行转换，得到一个json格式的字符串
				console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				$.ajax({
					type : "post", //提交方式
					url : "addData01", ////地址和springmvc中控制器地址一致
					data : JSON.stringify(data.field), //提交给控制器的数据
					contentType : "application/json", //提交给控制的数据 格式
					success : function(data) {
						console.log("是否增加成功：" + data);
						layer.msg(data, {
							time : 2000
						//两秒延迟
						}, function() {
							if (data == true) {

								//obj.update(); ?? 理想
								//layer.close(index);;
								parent.layer.closeAll(); //关闭所有,简单粗暴
								window.parent.location.reload(); //刷新父页面
							}

						});

					}
				});

				return false;
			});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>


	<script type="text/javascript">
	<!-- 弹出人员信息 -->
		function showuser() {
			layer.open({
				type : 1//弹出层 div
				,
				area : [ '600px', '530px' ],
				shade : 0.6,
				id : 'LAY_layuipro' //设定一个id，防止重复弹出
				,
				//content : $("#editFormDiv").html(),
				content : $("#userFormDiv"), //后面不用.html()

			});
		}
	</script>

	<!-- 页面加载生成一个申请单号 -->
	<script type="text/javascript">
		$(function() {

			var text = "MTA";
			var date = new Date();
			var month = null;
			var tian = null;
			var hour = null;
			var minute = null;
			var second = null;

			//获取月份
			if (date.getMonth() < 10) {
				var month = "0" + (date.getMonth() + 1);

			} else {
				var month = date.getMonth() + 1;
			}

			//获取日期
			if (date.getDate() < 10) {
				var tian = "0" + date.getDate();

			} else {
				var tian = date.getDate();
			}

			//获取小时
			if (date.getHours() < 10) {
				var hour = "0" + date.getHours();

			} else {
				var hour = date.getHours();
			}

			//获取分钟
			if (date.getMinutes() < 10) {
				var minute = "0" + date.getMinutes();

			} else {
				var minute = date.getMinutes();
			}

			//获取秒数
			if (date.getSeconds() < 10) {
				var second = "0" + date.getSeconds();

			} else {
				var second = date.getSeconds();
			}

			var id = text + date.getFullYear() + month + tian + hour + minute
					+ second;

			$("#flowid").val(id);

		})
	</script>

	<!-- 页面加载的时候传申请人工号到控制器获取申请人信息 -->
	<script type="text/javascript">
		$(function() {
			//在控制台输出申请人工号
			//console.log($("#applyno").val());
			$.ajax({
				url : "selemp/" + $("#applyno").val(),
				type : "get",
				/* 				data:{
				 empno:
				 }, */
				success : function(data) {
					//控制台打印看看
					//console.log("回调的数据" + data);
					//把申请人部门和邮箱放到对应的文本框中
					$("#applydeptname").val(data.deptids.deptname);
					$("#applydeptid").val(data.deptids.deptid);
					$("#applydeptemail").val(data.empemail);
					$("#nexthandler").val(data.deptids.deptleader);
				},
				dataType : "json"

			});
		});
	</script>

	<!-- 页面加载的时候获取所有员工信息，
	方便选择使用人 -->
	<script type="text/javascript">
		$(function() {

			$.ajax({
				url : "useemp",
				type : "get",
				data : {

				},
				success : function(data) {
					//控制台打印看看
					console.log("回调的数据" + data);
					//把结果展示在层中
					$.each(data, function(index, emp) {
						$("#useno").append(
								"<option value="+emp.empno+">" + emp.empno
										+ " :" + emp.empname + "</option>");
					});
				},
				dataType : "json"

			});
		});
	</script>


	<script type="text/javascript">

		//填写物料编码获取物料相关信息
		$(function() {
			//在控制台输出物料编号
			console.log($("#materialid").val());

			$("#materialid").change(function() {

				$.ajax({
					url : "getmatbymatid/" + $("#materialid").val(),
					type : "get",
					success : function(data) {
						//控制台打印看看
						console.log("回调的数据" + data);
						//把申请人部门和邮箱放到对应的文本框中
						$("#materialname").val(data.materialname);
						$("#materialprice").val(data.materialprice);
						$("#materialnum").val(data.materialnum);
					},
					dataType : "json"

				});
			});

		});
	</script>

	<script type="text/javascript">
		$(function() {
			//在控制台输出物料编号applynum  totalmoney
			console.log($("#applynum").val());

			$("#applynum").change(
					function() {

						console.log("单价：" + $("#materialprice").val());
						console.log("数量：" + $("#applynum").val());

						var totalmoney = $("#materialprice").val()
								* $("#applynum").val();

						console.log("总价：" + totalmoney);
						$("#totalmoney").val(totalmoney);
						/* $.ajax({
							url : "getmatbymatid/" + $("#materialid").val(),
							type : "get",
							success : function(data) {
								//控制台打印看看
								console.log("回调的数据" + data);
								//把申请人部门和邮箱放到对应的文本框中
								$("#materialname").val(data.materialname);
								$("#materialprice").val(data.materialprice);
								$("#materialnum").val(data.materialnum);
							},
							dataType : "json"

						}); */
					});

		});
	</script>

	<script type="text/javascript">
		//把部门的信息传给控制器获取审批人
		$.ajax({
			url : "selectapprove",
			type : "get",
			data : {
				deptname : $("#usedeptname").val()
			},
			success : function(data) {
				//控制台打印看看
				console.log("回调的数据" + data);
				//把申请人部门和邮箱放到对应的文本框中
				$("#nexthandler").val(data.deptleader);
			},
			dataType : "json"
		});
	</script>

	<!-- 文件上传 -->
 	<script>
		layui.use('upload', function() {
			var $ = layui.jquery, upload = layui.upload;

			//绑定原始文件域
			upload.render({
				elem : '#test1',
				url : "path",//改成您自己的上传接口
				auto:false,
				bindAction:$("#btnData"),
				done : function(res) {
					layer.msg('上传成功');
					console.log(res.msg)
					$("#applyattach").val(res.msg);
				}
			});

		});
	</script>
	


</body>
</html>
